<template>
    <div class="demand-detail">
        <a-modal width="1300px" :visible="visible" title="编辑资源" @cancel="closeModal" class="yuan-modal demand-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :class="isShow?'disable-form':''" :label-col="{ style: { width: '150px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel">
                        <div class="form-panel-box">
                            <div class="form-title">资源信息</div>
                            <a-form-model-item label="封面图" class="yuan-form-item" v-if="pageReady" prop="coverPicture">
                                <UploadVue :uploadLength="1" @uploadChange="uploadChangeCoverImageUrl"
                                    :defImgList="formData.coverPicture?[formData.coverPicture]:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="资源名称" prop="name">
                                <a-input class="yuan-form-input" v-model="formData.name" placeholder="请输入资源名称"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="联系部门" prop="relationDepartment">
                                <a-input class="yuan-form-input" v-model="formData.relationDepartment"
                                    placeholder="请输入联系部门"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="联系方式" prop="contactWay">
                                <a-input class="yuan-form-input" v-model="formData.contactWay" placeholder="请输入资源名称"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="相关链接" prop="url">
                                <a-input class="yuan-form-input" v-model="formData.url" placeholder="请输入资源名称"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="资源描述" prop="introduce">
                                <div class="editor" style="min-height:300px;width:1000px">
                                    <Toolbar style="border-bottom: 1px solid #ccc;" :editor="editorRef"
                                        :defaultConfig="editorConfig.toolbarConfig" mode="default" />
                                    <Editor v-model="formData.introduce" :defaultConfig="editorConfig" mode="default"
                                        @onCreated="handleCreated" />
                                </div>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <template v-if="isShow">
                    <a-button @click="closeModal">
                        关闭
                    </a-button>
                </template>
                <template v-else>
                    <a-button @click="modalOk" type="primary" :loading="saveLoading">
                        确认保存
                    </a-button>
                    <a-button @click="closeModal">
                        取消
                    </a-button>
                </template>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import api from "@/api/api";
import { MENU_CONF, toolbarConfig } from "@/utils/wangeditors";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
@Component({
    name: "tpl",
    components: { UploadVue, Editor, Toolbar },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: "" }) editId!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            if (this.editId) {
                this.getDetailInfo();
            } else {
                this.formData = {};
                this.pageReady = true;
            }
        } else {
            this.pageReady = false;
        }
    }
    saveLoading = false;
    formData: any = {};
    rules = {
        name: [{ required: true, message: "请输入资源名称", trigger: "change" }],
        relationDepartment: [{ required: true, message: "请输入联系部门", trigger: "change" }],
        contactWay: [{ required: true, message: "请输入联系方式", trigger: "change" }],
        coverPicture: [{ required: true, message: "请上传封面图片", trigger: "change" }],
        introduce: [{ required: true, message: "请填写描述", trigger: "change" }],
    };
    pageReady = false;

    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }

    async getDetailInfo() {
        this.saveLoading = true;
        try {
            const res = await api.getResourceAbutment({ id: this.editId });
            this.formData = res.data;
            this.pageReady = true;
        } finally {
            this.saveLoading = false;
        }
    }
    async modalOk() {
        if (!this.formData.coverPicture) {
            this.$message.error("请上传封面图");
            return;
        }
        if (!this.formData.introduce) {
            this.$message.error("请填写资源介绍");
            return;
        }
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) {
                this.$message.error("必填信息不完整，请检查后重试");
                return;
            }
            this.saveLoading = true;
            try {
                const res = await api.addResourceAbutment(this.formData);
                this.$message.success("保存成功");
                this.closeModal();
                this.$emit("resetList");
            } finally {
                this.saveLoading = false;
            }
        });
    }
    uploadChangeCoverImageUrl(e) {
        this.formData.coverPicture = e.length ? e[0].url : "";
    }

    editorRef = null;
    editorConfig = {
        placeholder: "请输入内容...",
        //配置工具栏
        toolbarConfig: toolbarConfig,
        MENU_CONF: MENU_CONF,
    };
    handleCreated(editor) {
        this.editorRef = editor; // 记录 editor 实例
    }
}
</script>
<style lang="scss">
.demand-detail-modal {
}
</style>
